<template>
  <div class="healthInfo pd-20">
    <el-input v-model="param.name"
              placeholder="套餐名称"
              class="w-200"
              @clear="handleQuery"
              clearable></el-input>
    <el-button @click="handleQuery"
               type="primary">查 询</el-button>
    <el-button @click="handle(2, 0)"
               type="primary">新 增</el-button>
    <el-table :data="tableData"
              border
              class="mt-20"
              style="width: 100%">
      <el-table-column align="center"
                       prop="name"
                       label="套餐名称"></el-table-column>
      <el-table-column align="center"
                       prop="hospitalName"
                       label="所属医院"></el-table-column>
      <el-table-column align="center"
                       prop="hospitalName"
                       label="适用院区（个）">
        <template slot-scope="scope">
          <span style="color:rgb(51, 201, 158);cursor: pointer;"
                @click="looklook(scope.row)">{{ scope.row.hospitalBranchDtos.length }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="applicableThrong"
                       label="适用对象">
        <template slot-scope="scope">
          <el-tag type="danger"
                  style="margin-right:5px; margin-bottom:5px;"
                  v-for="it in scope.row.applicableThrongDtos"
                  :key="it.id">{{it.name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="totalPrice"
                       label="总价">
        <template slot-scope="scoped">
          <span v-if="scoped.row.totalPrice">{{ scoped.row.totalPrice }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="manTotalPrice"
                       label="价格(男)">
        <template slot-scope="scoped">
          <span v-if="scoped.row.manTotalPrice">{{
            scoped.row.manTotalPrice
          }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="womanTotalPrice"
                       label="价格(女)">
        <template slot-scope="scoped">
          <span v-if="scoped.row.womanTotalPrice">{{scoped.row.womanTotalPrice}}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="状态">
        <template slot-scope="scoped">
          <span style="color:#f00">{{scoped.row.status === 1 ? "上架" : "下架"}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="上架时间"
                       :formatter="formatterDate"></el-table-column>
      <el-table-column align="center"
                       width="240"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="handle(3, scope.row)">编 辑</el-button>
          <el-button type="info"
                     @click="handle(4, scope.row)">{{ scope.row.status === 0 ? "上 架" : "下 架" }}</el-button>
          <el-button type="danger"
                     @click="handle(5, scope.row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <physical-dialog v-if="showdialog"
                     :dialogData="dialogData"
                     @closedialog="showdialog = false;_getList();" />
    <el-dialog title="适用院区"
               center
               :close-on-click-modal="false"
               :visible.sync="dialogVisible"
               width="30%"
               :before-close="handleClose">
      <el-table :data="look"
                border
                style="width: 100%">
        <el-table-column type="index"
                         width="30"></el-table-column>
        <el-table-column prop="branchName"
                         label="名称"></el-table-column>
        <el-table-column prop="address"
                         label="地址"></el-table-column>
      </el-table>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Page from "@/base/page/page";
  import physicalDialog from "./physicalDialog";
  import { mapGetters } from "vuex";

  export default {
    name: "physical", // 体检管理
    data () {
      return {
        param: {},
        dialogVisible: false,
        tableData: [],
        pageTotal: 0,
        showdialog: false,
        dialogData: {
          show: true,
          info: {}
        },
        look: []
      };
    },
    mounted () {
      this._getList();
    },
    methods: {
      handleQuery() {
        this.page.pageIndex=0
        this._getList()
      },
      handleClose () {
        this.dialogVisible = false;
        this.look = [];
      },
      looklook (row) {
        this.dialogVisible = true;
        this.look = row.hospitalBranchDtos;
      },
      handle (index, row) {
        switch (index) {
          case 1:
            this._getList();
            break;
          case 2:
            this.showdialog = true;
            this.dialogData = {
              show: true,
              info: null
            };
            break;
          case 3:
            this.post(this.api.cooperationHospital.physicalExamgetDetail, {
              id: row.id
            }).then(res => {
              this.showdialog = true;
              this.dialogData = {
                show: true,
                row: row,
                info: res.data.object
              };
            });

            break;
          case 4:
            let state;
            row.status === 1 ? state = 0 : state = 1;
            this.$confirm(
              `您是否要${state === 1 ? '上架' : '下架'}该套餐？`,
              '提示',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }
            )
              .then(() => {
                this.post(this.api.cooperationHospital.uploadStatus, {
                  status: state,
                  id: row.id
                }).then(res => {
                  if (res.data.code === '200') {
                    this.$message.success(`${state === 1 ? '上架' : '下架'}成功!`);
                    this._getList();
                  }
                });
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                });
              });
            break;
          case 5:
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                this.post(this.api.cooperationHospital.delPhysicalExamination, {
                  id: row.id
                }).then(res => {
                  if (res.data.code === '200') {
                    this.$message.success(res.data.message);
                    this._getList();
                  }
                });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
            break;
        }
      },
      _getList () {
        let param = {
          name: this.param.name,
          pageSize: this.page.pageSize,
          pageIndex: this.page.pageIndex
        };
        this.post(this.api.cooperationHospital.getPhysicalExamList, param).then(
          res => {
            if (res.data.code === '200') {
              this.tableData = res.data.object;
              this.pageTotal = res.data.totalNum;
            }
          }
        );
      },
      formatterDate (row) {
        return this.commonFunction.timestampFormat(
          new Date(row.createTime),
          "yyyy-MM-dd hh:mm:ss"
        );
      }
    },
    computed: {
      ...mapGetters(["page"])
    },
    components: {
      Page,
      'physical-dialog': physicalDialog
    }
  };
</script>

<style scoped lang="scss" >
</style>
